<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<style>
	.dialog {
	    background: #51dc51;
	    width: 200px;
	    padding: 5px 14px;
	    margin-left: 20px;
	    border-radius: 10px;
	    margin-top:8px;
    }
    
    #content .name {
    	position: relative;
	    top: -8px;
	    left: 8px;
    }
    
    .dialog p {
    	height: 2px;
    	line-height: 2px;
    }
    
    .dialog p img{
    	margin-top: -8px;
    }
    
    
    
</style>
<body>
 <div id="container" style="border: 1px solid #eaeaea;margin:20px auto; width: 1200px;height:800px;">
   <div style="height:50px;line-height: 50px;background:skyblue;text-align:center;">
   		即时通讯系统 v1.0
   </div>
   <div style="width:1010px;float:left;">
	   <div id="content" style="height:560px;overflow-y:scroll;padding:10px;"></div>
	   <div style="border-top: 1px solid #fff;position:relative;">
	   	
	      <textarea style="width:100%;height:20px;" class="ckeditor" id="content" name="content"></textarea>
	      <a href="javascript:void(0);" style="text-decoration:none; background:#69BC80;color:#fff;border:none;padding:4px 20px;position:absolute;right:10px;bottom:40px;" onclick="send();">发送</a>
	   </div>
   </div>
   
    <div id='userlist' style="width:180px;float:left;height:800px;background:#fff;">
    	
    </div>
   
 </div>
<!--  <div id="userList" style="border: 1px solid #fff; width: 200px;height:400px; float:left;"></div>-->
 <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script>var ctx = "${pageContext.request.contextPath}";</script>
<script src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>

<script type="text/javascript">
   //进入聊天页面，就打开socket通道
   var ws; //一个ws对象就是一个通话管理
   var target = "ws://localhost:8088/video?username=${username}";
   if(!"${username}"){
	   alert('请先登录！');
	   location.href="${pageContext.request.contextPath}/front/loginFront.jsp"
   }
   var main; //video父辈元素
   window.onload = function(){
	   //根据浏览器的不同区创建不同的websocket对象
	   if ('WebSocket' in window) {
           ws = new WebSocket(target);
       } else if ('MozWebSocket' in window) {
           ws = new MozWebSocket(target);
       } else {
           alert('WebSocket is not supported by this browser.');
           return;
       }
	   //发送消息
	   ws.onmessage = function (event) {
		  var obj = JSON.parse(event.data);
		  console.log(obj);
		  
		  var listHTML = "";
		  if(obj.username && obj.username.length){
			  for(var i=0;i < obj.username.length;i++){
				  listHTML += "<div style=\"height:38px;padding:8px;\"> "+
						  		"<img style=\"border-radius:50%;\" src=\"images/default.jpg\" width=\"30\" />"+
						  	  	"	<span style=\"padding-left:8px;position:relative;top:-10px;display:inline-block;\">"+obj.username[i]+"</span>"+
						  	  	"</div>";
			  }
			  
			  $('#userlist').html(listHTML);
		  }
		  
		  
		  
		  
		  if(obj.welcome != null){
			  $("#content").append(obj.welcome + "<br>");
		  }
 
		  if(obj.context != null){
			  $("#content").append(obj.context);
		  }
		  
		  if(obj.username != null){
			  //获取前先清空
			  $("#userList").html("");
			  //循环用户
			  $(obj.username).each(function(){
				  $("#userList").append(this + "<br>");
			  });
		  }
		  
       };
       ws.close = function(){
    	   //关闭websocket
    	   ws.close();
       };
       
   }
   //websocket发送消息
   function send(){
	   var msg = CKEDITOR.instances.content.getData();
	   if(msg == ''){
		   alert('请输入内容！');
		   return;
	   }
	   ws.send(msg);
	   CKEDITOR.instances.content.setData("");
   }
</script>
</body>
